<template>
  <view class="page">
    <view class="ff__box">
      <view class="ff__row">
        <view class="ff__label star">车牌号码</view>
        <picker
          class="picker"
          range-key="number"
          :range="carList"
          @change="chooseCar"
        >
          <view class="yd-flex">
            <view class="ff__value">
              <text v-if="form.number">{{ form.number }}</text>
              <text v-else class="yd-flex-1 ff__placeholder"
                >请选择车牌号码</text
              >
            </view>
            <image class="ff__arrow" src="~@/static/shop/arrow.png" />
          </view>
        </picker>
      </view>
      <view class="ff__row">
        <view class="ff__label star">车位编号</view>
        <picker
          class="picker"
          range-key="code"
          :range="placeList"
          @change="choosePlace"
        >
          <view class="yd-flex">
            <view class="ff__value">
              <text v-if="placeCode">{{ placeCode }}</text>
              <text v-else class="yd-flex-1 ff__placeholder"
                >请选择停放车位编号</text
              >
            </view>
            <image class="ff__arrow" src="~@/static/shop/arrow.png" />
          </view>
        </picker>
      </view>
      <view class="ff__row">
        <view class="ff__label star">入场日期</view>
        <view class="ff__value" style="padding-right: 0">
          <text v-if="form.date" class="yd-flex-1">{{ form.date }}</text>
          <text v-else class="yd-flex-1 ff__placeholder">请选择入场日期</text>
          <image class="ff__arrow" src="~@/static/shop/arrow.png" />
          <view class="ff__date">
            <uni-datetime-picker
              class="ff__date"
              type="datetime"
              v-model="form.date"
              :border="false"
              :hide-second="true"
              :clear-icon="false"
            />
          </view>
        </view>
      </view>
      <view class="ff__row" style="align-items: flex-start">
        <view class="ff__label" style="margin-top: 24rpx">备注信息</view>
        <textarea
          v-model="form.note"
          class="ff__textarea"
          placeholder="请输入相关的备注信息，如车辆是否能准时进场，路上是否有可能塞车等等~"
        />
      </view>
    </view>
    <view @click="reservation" class="global-btn">提交预约</view>
    <popup ref="popup" />
  </view>
</template>

<script>
import { getVipCarAPI } from "@/api/vip.js";
import { getPlaceIdleAPI } from "@/api/place.js";
import { reservationAPI } from "@/api/reservation.js";

export default {
  data() {
    return {
      carList: [],
      placeList: [],
      form: {
        number: "",
        placeId: "",
        date: "",
      },
      placeCode: "",
    };
  },
  onLoad() {
    this.getCarList();
    this.getPlaceIdle();
  },
  methods: {
    reservation() {
      this.YD_checkEmpty(this.form.number, "请选择车牌号码", this);
      this.YD_checkEmpty(this.form.placeId, "请选择车位", this);
      this.YD_checkEmpty(this.form.date, "请选择入库时间", this);
      uni.showLoading({ title: "提交中..." });
      reservationAPI({
        ...this.form,
        date: this.form.date + ":00",
      }).then(() => {
        this.$refs.popup.success("预约成功");
        uni.hideLoading();
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
            success: () => {
              uni.$emit("reservation");
            },
          });
        }, 400);
      });
    },
    /** @name 选择车辆 **/
    chooseCar(e) {
      const index = e.detail.value;
      const target = this.carList[index];
      this.form.number = target.number;
    },
    /** @name 选择车位 **/
    choosePlace(e) {
      const index = e.detail.value;
      const target = this.placeList[index];
      this.form.placeId = target.id;
      this.placeCode = target.code;
    },
    /** @name 获取车位列表 **/
    getPlaceIdle() {
      getPlaceIdleAPI().then((res) => {
        this.placeList = res.rows;
      });
    },
    /** @name 获取会员车辆列表 **/
    getCarList() {
      getVipCarAPI().then((res) => {
        this.carList = res.rows;
      });
    },
  },
};
</script>

<style lang="scss">
.page {
  box-sizing: border-box;
  padding: 24rpx 24rpx 2rpx 24rpx;
}
.ff__box {
  background-color: #fff;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 0 24rpx 0 24rpx;
}
.ff__row {
  width: 100%;
  min-height: 88rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #eeeeee;
  color: #333;
  &:last-child {
    border-bottom: none;
  }
}
.ff__label {
  min-width: 160rpx;
  width: 160rpx;
  font-size: 26rpx;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right: 20rpx;
  padding-left: 4rpx;
  white-space: nowrap;
  color: #999;
}
.ff__label.star::before {
  content: "*";
  min-width: 16rpx;
  color: #ff3030;
  font-size: 30rpx;
  text-align: left;
  line-height: 1;
  margin-top: 4rpx;
  margin-right: 8rpx;
}
.ff__value {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  padding-right: 16rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #333;
  position: relative;
}
.ff__date {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  ::v-deep .uni-date-x {
    opacity: 0 !important;
  }
}
.ff__input {
  flex: 1;
  height: 32rpx;
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
  margin-top: 4rpx;
}
.ff__textarea {
  width: 100%;
  height: 256rpx;
  border-radius: 18rpx;
  box-sizing: border-box;
  padding: 24rpx 0;
  font-size: 26rpx;
  color: #333;
}
.ff__placeholder {
  color: #d1d1d1;
  font-size: 28rpx;
}
.ff__arrow {
  min-width: 44rpx;
  width: 44rpx;
  height: 88rpx;
}
.block {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 14rpx;
  color: #999999;
  box-sizing: border-box;
  padding: 0 24rpx;
  margin-top: 24rpx;
}
</style>
